<template>
  <div>
    <a-modal
      v-model="productData.show"
      width="600px"
      style="overflow:hidden"
      @cancel="handleClose"
    >
      <div slot="title">
        <span>{{productData.title}}</span>
      </div>
      
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 30px 30px">
              <el-col :span="24">
                <el-form-item label="产品名称:" prop="productName">
                  <el-input size="small" v-model="parames.productName" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="描述:">
                  <el-input type="textarea" size="small" v-model="parames.productDesc" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>  
            </el-row>
          </el-form>
          <template slot="footer">
            <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSend">保存</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
          </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: ["productData"],
  data() {
    return {
      parames: {
        id: '',
        productTypeId: '',
        productName: '', //类型名称
        productDesc: ''
      },
      loadingBtn: false,
      menuType: [],
      rules: {
        productName: [
          { required: true, message: "必填", trigger: "blur" },
        ]
      },
    };
  },
  mounted() {},
  methods: {

    handleClose() {
      //关闭弹窗
      this.productData.show = false;
    },
    handleSend () { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          if (this.productData.type == 'new') {
            this.$post(this.$api.postBaseInfoProductAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          } else if (this.productData.type == 'edit') { //添加子菜单或功能项
            this.parames.id = this.productData.id
            this.$post(this.$api.postBaseInfoProductEdit,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    render () {
      this.parames.productTypeId = this.productData.productTypeId
      if (this.productData.type == 'edit') {
        this.parames.productName = this.productData.name
        this.parames.productDesc = this.productData.productDesc
      }
    },
    restData () {
        this.parames.id = ''
        this.parames.productTypeId = ''
        this.parames.productName = ''
        this.parames.productDesc = ''
        this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.productData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
